<template>
    <div>
        <div class="choose-seat-head">
            <span class="head-first" @click="choosearea">1.选择区域</span>
            <span class="head-second" @click="about">2.选择座位</span>
            <span class="head-third" @click="pay">3.结账付钱</span>
        </div>
    </div>
</template>

<script>
export default {

    name: "choose",
    data() {
        return {

        }
    },
    methods: {
        about() {
            this.$router.replace({ path: '/about' })
        },
        pay() {
            this.$router.replace({ path: '/pay' })
        }
    },
    components: {

    }
}
</script>

<style scoped>
.choose-seat-head {
    height: 50px;
    width: 100%;
    background: black;
    color: white;
    display: table
}

.choose-seat-head span {
    vertical-align: middle;
    display: table-cell;
}
</style>